<template>
  <div class="news-detail" v-show="!showList">
    <div class="news-detail-title">
      <span>{{news.newsTitle}}</span>
    </div>
    <div class="news-detail-date">
      <span>日期：{{news.publishTime}} </span>
      <span>浏览次数：{{news.times}}</span>
      <span class="news-detail-date-return" @click="returnNewsList">[返回]</span>
    </div>
    <el-row>
      <div class="text-wrapper" v-html="news.newsContent"></div>
    </el-row>
  </div>
</template>
<script>
import api from '../api';

export default {
  name: 'news-detail',
  props: {
    showList: Boolean,
    newsId: Number,
    times: Number
  },
  data() {
    return {
      news: {}
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      const params = {
        newsId: this.newsId,
        times: this.times
      };
      api.getNewsListById(params).then((data) => {
        this.news = data;
      });
    },
    returnNewsList() {
      this.$emit('update:showList', true);
      this.$emit('onReturn');
    }
  }
};
</script>
<style scoped lang="scss">
  .news-detail {
    margin-top: 40px;
    &-title {
      width: 100%;
      text-align: center;
      font-size: 24px;
    }
    &-date {
      font-size: 14px;
      text-align: center;
      color: #b2a9b4;
      &-return:hover {
        cursor: pointer;
        color: #db9d36;
      }
    }
    .text-wrapper {
      white-space: pre-wrap;
      margin-top: 20px;
    }
  }
</style>
